<%@page import="com.ivt.utils.enums.Sign"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ include file="../include.jsp"%>
<div class="container">
		<fieldset class="layui-elem-field" style="padding: 10px;">
	 		<legend><b>检索区域</b></legend>
			<form class="layui-form layui-form-pane" action="">
			    <div class="layui-inline">
			    	<label class="layui-form-label">所属课程</label>
			    	<div class="layui-input-block">
					    <select name="courses" lay-search=""> 
				          <option value="">请选择课程</option>
				          <c:forEach items="${courses }" var="courses">
					          <option value="${courses.id }">${courses.name }</option>
				          </c:forEach>
				        </select>
			        </div>
			    </div>
				<div class="layui-inline">
					<label class="layui-form-label">签到类型</label>
					<div class="layui-input-inline">
						<select name="sign" lay-search="">
				          <option value="">请选择课程</option>
					      <option value="<%= Sign.IN.getValue()%>"><%= Sign.IN.getLable()%></option>
					      <option value="<%= Sign.OUT.getValue()%>"><%= Sign.OUT.getLable()%></option>
				        </select>
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<button class="layui-btn layui-btn-normal" id="${moduleName }SearchBtn" lay-submit lay-filter="${moduleName }Search">开始检索</button>
						<button type="reset" class="layui-btn layui-btn-primary" id="${moduleName }Reset">重置</button>
					</div>
				</div>
			</form>
		</fieldset>
		<div class="handle-btn listTopFixed layui-hide">
			<button class="layui-btn layui-btn-small add-${moduleName }" data-url="/teacher/${moduleName }/create/"><i class="layui-icon"></i>添加</button>
			<button class="layui-btn layui-btn-small layui-btn-danger del-${moduleName }" data-url="/teacher/${moduleName }/del/"><i class="layui-icon"></i> 删除</button>
		</div>

		<div class="table-list">
			<table class="layui-table" lay-skin="line" id="date-${moduleName }-table">
				<thead>
					<tr>
						<th>
							<input type="checkbox" name="item[all]" lay-skin="primary" class="my-checkbox">
						</th>
						<th>学生姓名</th>
						<th>签到地点</th>
						<th>签到时间</th>
						<th>课程名称</th>
						<th>课程时间</th>
						<th>类型</th>
						<th>班级名称</th>
					</tr>
				</thead>
				<tbody id="${moduleName }Content">
				</tbody>
			</table>
			
			<div id="${moduleName }Pagination"></div>
		</div>
	</div>

<script id="${moduleName }-tpl" type="text/html">

{{#  layui.each(d.data, function(index, item){ }}
  <tr  data-assign="1" class="tableTrSelect">
    <td>{{index}} - {{ item.attendanceId}}</td>
	<td>{{ item.studentName}}</td>
	<td>{{ item.address}}</td>
	<td>{{ item.signTime}}</td>
	<td>{{ item.coursesName}}</td>
	<td>{{ item.coursesTime}}</td>
	<td>{{ item.sign}}</td>
	<td>{{ item.classesName}}</td>
  </tr>
{{#  }); }}
 
</script>
<style>

.my-checkbox {
    -webkit-appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #FFFFFF;
    border: solid 2px #28B779;
    border-radius: 2px;
    background-clip: padding-box;
    display: inline-block;
    cursor: pointer;
}
.my-checkbox:checked::before {
    position: absolute;
    display: inline-block;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    font-family: "Microsoft Yahei";
    content: "√";
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
}
.my-checkbox:checked {
    background-color: #28B779;
    border: solid 0 #28B779;
}
</style>
<script>
layui.use(['laypage', 'layer', 'form', 'laytpl'], function(){
  var laypage = layui.laypage,
  		layer = layui.layer,
  		$ = layui.jquery,
  		laytpl = layui.laytpl,
		form = layui.form();
  
  	form.render();
  	
  	var pageSize = 10 ;
  	var query = "" ;
  
	var attendanceActive = {
			render : function(curr){
				  $.post('${ctx}/teacher/${moduleName }/pagination',{pageSize :pageSize ,page :curr ,criteria :query} ,function(rst){
					  if(!rst){
				    		layer.msg('网络连接错误，请稍后再试。。。', {
				    			icon: 2,
				    			shade: [0.8, '#393D49'],
				  			  	anim: 6
				  			});
				    		return ;
				    	}
				    	
				    	if('error' == rst.code){
				    		layer.msg(rst.message, {
				    			time:2000,
				    			icon: 2,
				    			shade: [0.8, '#393D49'],
			  			  		anim: 6
			  				});
				    		return ;
				    	}
				    	
				    	var getTpl = $('#${moduleName }-tpl').html();
				    	laytpl(getTpl).render(rst, function(html){
				    		$('#${moduleName }Content').html(html);
				    	});
			  	  });
			  },
			  
			  pagination : function(){
				  var $this = this ;
				  $.post('${ctx}/teacher/${moduleName }/pages',{criteria :query} ,function(rst){
					  if(!rst){
				    		layer.msg('网络连接错误，请稍后再试。。。', {
				    			icon: 2,
				    			shade: [0.8, '#393D49'],
				  			  	anim: 6
				  			});
				    		return ;
				    	}
				    	
				    	if('error' == rst.code){
				    		layer.msg(rst.message, {
				    			time:2000,
				    			icon: 2,
				    			shade: [0.8, '#393D49'],
			  			  		anim: 6
			  				});
				    		return ;
				    	}
				    	$("#date-${moduleName }-table thead input[type='checkbox']:checkbox").prop("checked", false);
				    	$('#${moduleName }Content').empty();
				    	
			    		var pages = rst.data <= 0 ? 1 :rst.data;
			    		console.debug('pages is '+ pages) ;
				    	 laypage({
			    			cont: "${moduleName }Pagination"
			    		    ,pages:  Math.ceil((1*pages)/pageSize)  //得到总页数
			    		    ,skip:true
			    		    ,jump: function(obj, first){
			    		    	console.debug(" obj -> " + obj +"  first -> "+ first);
			    		    	if(first && rst.data <= 0){
			    		    		return ;
			    		    	}
			    		    	$this.render(obj.curr);
			    		    }
			    		 });
				    	
			  	  });
				 
			  }
	};
	
	
  
	//监听提交
	  form.on('submit(${moduleName }Search)', function(data){
		  
		  query = JSON.stringify(data.field);
		  attendanceActive.pagination() ;
	      return false;
	  });
  
	$('#${moduleName }SearchBtn').trigger('click') ;
});
</script>